结论先行：图片优化按四个动作落地就行：压缩体积、按显示宽度给尺寸、写清替代文字、非首屏图片懒加载，首屏变快，图片也更容易被检索到。

设计稿上的大图很好看，上传之后常常成为拖慢首屏的主因。一张没处理的产品图，体积可能超过整页文字的几十倍。

本文要点

• 先压体积再谈画质，首屏图优先处理；
• 图片按实际显示宽度导出，不要用样式把大图缩小；
• 替代文字写清画面内容，兼顾读屏与检索。

一、四个动作，按这个顺序做

二、压缩与尺寸决定首屏速度

首屏图优先处理：先按实际显示尺寸导出，再压到肉眼可接受的程度。多数产品图走完这两步，体积能降一个量级，观感差别很小。

首屏图不要加懒加载。浏览器要等脚本执行才去请求图片，等于把本该先到的图推迟到最后。

三、替代文字与懒加载影响收录

替代文字是写给读屏软件和检索程序看的说明。写“不锈钢法兰DN50侧面接口”，比写“产品图”有用得多。

检查方法很直接：把页面上的图片全部关掉，看剩下的文字能不能说清这页在讲什么。说不清，说明替代文字没写到位，图片等于白放。

术语与定义

替代文字

图片标签里的alt内容，用来描述画面与用途，供读屏软件朗读，也供检索程序判断图片讲什么。

懒加载

页面初次加载时只请求可视区域内的图片，其余图片在滚动到附近才加载，用来缩短首屏等待时间。

常见问题

Q：图片压缩后会不会变模糊？

A：会有一点损失，但要看显示尺寸。按实际显示宽度导出再压缩，在常见屏幕上基本看不出差别，放大看才有。

Q：WebP格式现在都能用吗？

A：主流浏览器已支持。老版本环境可以保留JPEG作为备选，同一张图准备两个地址分别提供即可。

Q：几百张产品图要一张张改吗？

A：先处理首屏和前二十个高访问页面的图，其余可以批量压缩，不必一次全部重做，按访问量排优先级。

延伸阅读

• 网站优化服务
• 优化方法栏目
• 手机网站制作

图片体检可以先从首屏开始，昆网科技提供页面速度检查，电话 13913177687。